<template>
  <!-- PAGE CONTENT BEGINS -->
  <div>
    <el-menu :default-active="activeIndex2"
             class="el-menu-demo"
             mode="horizontal"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item index="0"><router-link to="/welcome">主页</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to="/user/administrator">管理员</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/book/book">书籍</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/user/member">会员</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/book/book-link">借阅一览</router-link></el-menu-item>
      <el-submenu index="5">
        <template slot="title">当前用户:{{loginUser.name}}</template>
        <el-menu-item index="5-1" @click="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <p style="margin-top: 10px">
      <button v-on:click="add()" class="btn btn-white btn-warning btn-round">
        <i class="ace-icon fa fa-edit bigger-120 blue"></i>
        新增
      </button>
      &nbsp;
      <button v-on:click="list()" class="btn btn-white btn-warning btn-round">
        <i class="ace-icon fa fa-refresh bigger-120 blue"></i>
        刷新
      </button>
    </p>
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
        <th> id </th>
        <th> 登陆名 </th>
        <th> 姓名 </th>
        <th> 密码 </th>
        <th> 电话 </th>
        <th> 住址 </th>
        <th> 性别  </th>
        <th> 年龄 </th>
        <th> 入职时间 </th>
        <th> 创建时间 </th>
        <th> 修改时间 </th>
        <th> 是否删除 </th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="bbsAdministrator in bbsAdministrators" :key="bbsAdministrator.num">
          <td> {{bbsAdministrator.id}} </td>
          <td> {{bbsAdministrator.username}} </td>
          <td> {{bbsAdministrator.name}} </td>
          <td> {{bbsAdministrator.password}} </td>
          <td> {{bbsAdministrator.tel}} </td>
          <td> {{bbsAdministrator.address}} </td>
          <td> <el-tag>{{bbsAdministrator.sex === 1 ? '男' : '女'}}</el-tag></td>
          <td> {{bbsAdministrator.age}} </td>
          <td> {{bbsAdministrator.entryTime}} </td>
          <td> {{bbsAdministrator.createdTime}} </td>
          <td> {{bbsAdministrator.updatedTime}} </td>
          <td> <el-tag type="danger">{{bbsAdministrator.deleteFlag === 1 ? '删除' : '未删除'}}</el-tag></td>
        <td>
          <div class="hidden-sm hidden-xs btn-group">
            <button v-on:click="edit(bbsAdministrator)" class="btn btn-xs btn-info">
              <i class="ace-icon fa fa-pencil bigger-120"></i>
            </button>

            <button v-on:click="del(bbsAdministrator.id)" class="btn btn-xs btn-danger">
              <i class="ace-icon fa fa-trash-o bigger-120"></i>
            </button>
          </div>

          <div class="hidden-md hidden-lg">
            <div class="inline pos-rel">
              <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
              </button>

              <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                <li>
                  <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                    <span class="blue">
                      <i class="ace-icon fa fa-search-plus bigger-120"></i>
                    </span>
                  </a>
                </li>

                <li>
                  <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                    <span class="green">
                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                    </span>
                  </a>
                </li>

                <li>
                  <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                    <span class="red">
                      <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <!--模态框-->
    <div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">表单</h4>
          </div>
          <div class="modal-body">
            <!--表格-->
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">登陆名</label>
                <div class="col-sm-10">
                  <input v-model="bbsAdministrator.username" class="form-control" placeholder="输入登陆名"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input v-model="bbsAdministrator.name" class="form-control" placeholder="输入姓名"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input v-model="bbsAdministrator.password" class="form-control" placeholder="输入密码"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                  <input v-model="bbsAdministrator.tel" class="form-control" placeholder="输入电话"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">住址</label>
                <div class="col-sm-10">
                  <input v-model="bbsAdministrator.address" class="form-control" placeholder="输入住址"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">性别 </label>
                <div class="col-sm-10">
                  <el-select v-model="bbsAdministrator.sex" placeholder="选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                  <input v-model="bbsAdministrator.age" class="form-control" placeholder="输入年龄"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">入职时间</label>
                <div class="col-sm-10">
                  <div class="block">
                    <el-date-picker
                            v-model="bbsAdministrator.entryTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="选择入职时间">
                    </el-date-picker>
                  </div>
                </div>
              </div>
<!--              <div class="form-group">-->
<!--                <label class="col-sm-2 control-label">创建时间</label>-->
<!--                <div class="col-sm-10">-->
<!--                  <input v-model="bbsAdministrator.createdTime" class="form-control" placeholder="输入创建时间"/>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="form-group">-->
<!--                <label class="col-sm-2 control-label">修改时间</label>-->
<!--                <div class="col-sm-10">-->
<!--                  <input v-model="bbsAdministrator.updatedTime" class="form-control" placeholder="输入修改时间"/>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="form-group">-->
<!--                <label class="col-sm-2 control-label">是否删除</label>-->
<!--                <div class="col-sm-10">-->
<!--                  <input v-model="bbsAdministrator.deleteFlag" class="form-control" placeholder="输入是否删除"/>-->
<!--                </div>-->
<!--              </div>-->
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
          </div>
        </div><!-- /.modal-content-->
      </div><!-- /.modal-dialog-->
    </div><!-- /.modal-->
  </div>
</template>
<script>
import {apiDefaultErrorHandler} from "../../api/base";
import bbsAdministratorApi from "../../api/work/bbsAdministrator";
export default {
  name: 'system-bbsAdministrator',
  data: function (){
    return{
      //映射表单数据
      bbsAdministrator: {},
      bbsAdministrators: [],
      loginUser:{},
    }
  },
  mounted:function (){
    let _this = this;
    _this.list();
    //重新加载js
    $.getScript('ace/assets/js/ace.min.js');
    _this.loginUser = Tool.getLoginUser();
  },
  methods:{

    add() {
      let _this = this;
      _this.bbsAdministrator = {};
      $("#myFormModal").modal("show");
    },

    edit(bbsAdministrator) {
      let _this = this;
      _this.bbsAdministrator = $.extend({},bbsAdministrator);
      $("#myFormModal").modal("show");
    },
    /**查询*/
    list(){
      let _this = this;
      Loading.show();
      bbsAdministratorApi.queryAll().then(({data}) => {
        if (this.$http.isResponseSuccess(data)) {
          _this.bbsAdministrators = data.list
        } else {
          apiDefaultErrorHandler(data)
        }
      }).catch((ex) => {
        apiDefaultErrorHandler(ex)
      });
      Loading.hide();
    },
    /**保存*/
    save(){
      let _this = this;
      /**保存校验*/
      if(1 != 1
      || !Validator.require(_this.bbsAdministrator.username,"登陆名")
      || !Validator.length(_this.bbsAdministrator.username,"登陆名",1,50)
      || !Validator.length(_this.bbsAdministrator.name,"姓名",1,50)
      || !Validator.require(_this.bbsAdministrator.password,"密码")
      || !Validator.length(_this.bbsAdministrator.tel,"电话",1,50)
      || !Validator.length(_this.bbsAdministrator.address,"住址",1,50)
      ){
        return;
      }
      bbsAdministratorApi.save(_this.bbsAdministrator).then(({ data }) => {
        if (this.$http.isResponseSuccess(data)) {
          console.log("保存{tableNameCn}列表结果：",data);
          $("#myFormModal").modal("hide");
          _this.list();
          toast.success("保存成功！");
        } else {
          toast.warning("操作失败");
          apiDefaultErrorHandler(data)
        }
      }).catch((ex) => {
        toast.warning("操作失败");
        apiDefaultErrorHandler(ex)
      })
    },
    /**删除*/
    del(id){
      let _this = this;
      //弹出框
      Confirm.show("删除{tableNameCn}后不可恢复，您是否检查删除!",function (){
        bbsAdministratorApi.delete({id: id}).then(({ param }) => {
          if (this.$http.isResponseSuccess(param)) {
            toast.success("删除成功！");
            _this.list()
          } else {
            toast.success("删除成功！");
            _this.list()
          }
        }).catch(() => {
          toast.warning("删除成功！");
          _this.list()
        });
      })
    },
    /**退出登录*/
    logout(){
      Tool.setLoginUser(null);
      this.$router.push("/login");
    },
  }
}
</script>